@import '../var';
@import '../control';

@keyframes dotting {
  33% {
    transform: translateY(-2em);
  }
  66% {
    transform: translateY(-1em);
  }
}

@mixin text-label {
  @include control;
  padding-left: 0;
  padding-right: 0;
  @each $name, $pair in $colors {
    &.is-#{$name} {
      color: nth($pair, 1);
    }
  }
}

.txt-box {
  @include text-label;
  .dotting,
  dotting {
    display: inline-block;
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -0.25em;
    overflow: hidden;
    &::before {
      display: block;
      content: '...\A..\A.';
      white-space: pre-wrap; /* or white-space: pre */
      animation: dotting 3s infinite step-start both;
    }
  }
}

.time-label {
  @include text-label;
}
